<template>
  <Steps ref="stepsRef" v-show="!isPreview" />
  <div :class="['edit-page', isPreview ? 'is-preview' : '']">

    <div class="top-btn" v-if="isPreview">
      <div class="name">{{ isPreview ? currentCeilingStyle?.roomNames[0] : '编辑方案' }}</div>
      <div>
        <img @click="reToEdit" src="@/assets/images/comm/edit.png">
        <img @click="toDelete" src="@/assets/images/comm/delete.png">
      </div>
    </div>
    <div class="step-1" v-if="stepsRef?.active == 1">
      <p>吊顶造型制作方式</p>
      <div class="choose">
        <div @click="param1.ceilingStyleMakeType = 0"
          :class="['choose-btn ', param1.ceilingStyleMakeType == 0 ? 'active' : '']">木工吊顶</div>
        <div @click="choosejicheng" :class="['choose-btn mg-l10', param1.ceilingStyleMakeType == 1 ? 'active' : '']">
          集成吊顶</div>
      </div>
      <p>吊顶造型设计</p>
      <div class="choose">
        <div @click="param1.isPartition = true" :class="['choose-btn ', param1.isPartition ? 'active' : '']">分区</div>
        <div @click="param1.isPartition = false" :class="['choose-btn mg-l10', param1.isPartition ? '' : 'active']">不分区
        </div>
      </div>
      <p v-if="param1.isPartition">造型分区方法</p>
      <div class="choose-type" v-if="param1.isPartition">
        <el-checkbox :disabled="param1.ceilingStyleMakeType == 1 ? true : false"
          v-model="param1.ceilingStyleMethodType.haveCentral" border label="有中心造型区域" />
        <div class="mg-l20" v-if="param1.ceilingStyleMethodType.haveCentral">
          区域形状:
          <el-select v-model="param1.ceilingStyleMethodType.cutAreaType" style="width: 110px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>


      </div>
      <div class="check" v-if="param1.isPartition">
        <el-checkbox v-model="param1.ceilingStyleMethodType.curtain" border label="有窗帘盒区域" />
      </div>
      <div class="fenqu-btn " v-if="param1.isPartition" @click="generateAreaClick">生成分区</div>
    </div>

    <div class="step-2" v-if="stepsRef?.active == 2">
      <GreyText v-if="currentCeilingStyle && !isDesign" :item="currentCeilingStyle" />
      <div v-if="!isDesign" class="render-list  ">
        <div v-for="area in currentCeilingStyle?.areaModelProperty"
          :class="['render-item', param1.ceilingStyleMakeType == 1 ? 'jicheng-render-item' : '']">
          <div v-for="key in area.modelParameterList[0].modelParameterKeyList">


            <!-- 0 数字输入框 -->
            <div class="number" v-if="getModel(area, key)?.widgetType == 0">
              <div class="mg-b5">
                {{ getModel(area, key)?.name }}
              </div>
              <NumberInput :disabled="isPreview" @changeValue="(value: number) => {
                changeValue(area, key, value)
              }" v-if="getModel(area, key)" v-model="getModel(area, key)['currentValue']" />
            </div>
            <!-- 1 下拉 -->
            <div v-if="getModel(area, key)?.widgetType == 1"> 下拉</div>
            <!-- 2 单选 -->
            <div v-if="getModel(area, key)?.widgetType == 2"> 单选</div>
            <!-- 3 开关 -->
            <div v-if="getModel(area, key)?.widgetType == 3"> 开关</div>
            <!-- 4 多行文本 -->
            <div v-if="getModel(area, key)?.widgetType == 4"> 多行文本</div>
            <!-- 5 单行文本 -->
            <div :class="['text', getModel(area, key)?.currentValue.length > 2 ? 'is-vertical' : '']"
              v-if="getModel(area, key)?.widgetType == 5">{{ getModel(area, key)?.currentValue }}
            </div>
            <!-- 6 模型 -->
            <div class="card" @click="chooseModel(area, key)" v-if="getModel(area, key)?.widgetType == 6">

              <div class="left">
                <img v-if="getModel(area, key)?.currentValue.imagePath" class="tip-img"
                  src="@/assets/images/comm/Rectangle .png">
                <img class="real-img" v-if="getModel(area, key)?.currentValue.imagePath"
                  :src="getModel(area, key)?.currentValue.imagePath">
                <img v-else src="@/assets/images/comm/empty.png">

              </div>
              <div class="right  ">
                <img v-if="getModel(area, key)?.currentValue.imagePath" src="@/assets/images/comm/waring.png">
                <div class="right-t">{{ getModel(area, key)?.currentValue.modelName }}</div>
                <div class="right-b">{{ getModel(area, key)?.currentValue.prdName }}</div>
              </div>
            </div>
            <!--  7 饰面 -->
            <div class="decorate" v-if="getModel(area, key)?.widgetType == 7">饰面</div>

            <!-- 8 商品信息 -->
            <div class="goods" v-if="getModel(area, key)?.widgetType == 8">商品信息</div>
          </div>

          <!-- 排版设计按钮  集成吊顶才展示 -->
          <div class="jicheng-btn  " v-if="param1.ceilingStyleMakeType == 1">
            <div class="is-design">
              <img src="@/assets/images/comm/Sad.png" alt="">
              <span>排版未设计</span>
            </div>
            <div class="no-design" v-if="false">
              <img src="@/assets/images/comm/ready.png" alt="">

              <span>排版以设计</span>
            </div>
            <div class="design" @click="toDesign(area)">排版设计</div>
          </div>


        </div>
        <div class="box"></div>
      </div>
      <div v-if="isDesign">
        <ToDesign ref="toDesignRef" :id="currentCeilingStyle?.id" :areaId="currentAreaId" />
      </div>
    </div>
    <div class="step-3" v-if="stepsRef?.active == 3">
      <SuccessPage @toClick="toClick" />
    </div>
    <div class="bottom-btn " v-if="stepsRef?.active != 3">
      <div :class="['left', stepsRef?.active != 2 ? 'hidden' : '', param1.ceilingStyleMakeType == 1 ? 'hidden' : '']">
        <span>是否自动铺贴白色乳胶漆</span>
        <el-radio-group @change="whitePaintChange" v-model="useWhitePaint" class="ml-4">
          <el-radio :value="1" size="large">是</el-radio>
          <el-radio :value="0" size="large">否</el-radio>
        </el-radio-group>

      </div>
      <div>
        <el-button v-if="!isDesign" size="small" @click="cancel">取消</el-button>
        <el-button v-if="!isDesign" v-show="stepsRef?.active != 1" @click="stepsRef?.prev" size="small">上一步</el-button>
        <el-button v-if="!isDesign" @click="nextStep" size="small" type="primary"> {{ stepsRef?.active == 2 ? "生成吊顶" :
          '下一步' }} </el-button>

        <el-button v-if="isDesign" size="small" @click="isDesign = false">取消</el-button>
        <el-button v-if="isDesign" @click="confirmAndBack" size="small" type="primary">确定并返回</el-button>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Steps from "@/components/Steps/src/index.vue"
import ToDesign from "@/views/TopDesign/components/ToDesign.vue"
import { findModeByKey, getItem } from "@/utils/findModeBykey";
import { computed, nextTick, onMounted, reactive, ref, toRefs } from "vue"
import GreyText from "@/views/TopDesign/components/GreyText.vue"
import { useRoute, useRouter } from "vue-router";
import { useData } from "@/hooks/useData";
import { modelChooseData } from "@/types/tempData";
const currentStep = computed(() => stepsRef.value?.active)


const getModel = (model: AreaModelProperty$5, key: string) => {

  return model.modelParameterValueMap.find(m => m.key == key)?.modelParameterValue ?? null
}

const route = useRoute()
const id = route.params.id as string
// 假数据
const currentData = getItem(id) as any as AreaModelProperty$5
console.log("假数据是:")
console.log(currentData)
// 步骤条组件对象
const stepsRef = ref<InstanceType<typeof Steps>>()
//第一步 发送的数据
const param1 = reactive({
  id: id,
  ceilingStyleMakeType: 0, //木工吊顶 0 集成吊顶 1
  isPartition: true, //吊顶造型设计
  ceilingStyleMethodType: {
    cutAreaType: 0,       //区域形状 0矩形 1.圆形 2.多边形 CutAreaType{Rectangle = 0,Circle,Polygon}
    haveCentral: true,     //是否有中心造型区域
    curtain: false       //是否有窗帘盒区域
  }
})
//选择集成吊顶
const choosejicheng = () => {
  param1.ceilingStyleMakeType = 1
  param1.ceilingStyleMethodType.haveCentral = false
}
const options = [{
  value: 0,
  label: '矩形'
}, {
  value: 1,
  label: '圆形'
}, {
  value: 2,
  label: '多边形'
}]

const router = useRouter()
const cancel = () => {
  sendData("Ceiling.CeilingStyle,Cancel", { id: id })
  router.push("/CeilingStyle")
}

// 生成分区按钮
const generateAreaClick = () => {
  sendData("Ceiling.CeilingStyle,AreaCreate", param1)
}

const nextStep = () => {

  // 第一步
  if (stepsRef.value?.active == 1) {
    sendData("Ceiling.CeilingStyle,NextCeilingDesign", param1)
  }
  // 生成吊顶
  if (stepsRef.value?.active == 2) {
    console.log('生成吊顶了')
    generateBtn()
  }
  stepsRef.value?.next()
}
const currentCeilingStyle = ref<ICeilingStyle>()

const { getData, sendData } = useData('')

// 点击模型
const chooseModel = (item: AreaModelProperty$5, k: string) => {
  if (isPreview.value) return
  const key = item.modelParameterValueMap.find(i => i.key == k)?.modelParameterValue.key
  sendData("Ceiling.CeilingStyle,ModelChoose", {
    id: id,
    propertyId: item.id,
    valueKey: key ? key : 'model'
  })
  chooseModelThenData()
}

// 自定义数字组件发出的 数值改变的事件
const changeValue = (item: AreaModelProperty$5, key: string, value: number) => {
  let obj = getModel(item, key)
  console.log("收到最近的改变了", value, obj)
  sendData("Ceiling.CeilingStyle,ValueChange", {
    id: id,
    propertyId: item.id,
    valueKey: obj?.key,
    value: obj?.viewValue + ''
  })

}

// 是否为 完成后 预览
const isPreview = ref(false)
// 集成吊顶 排版设计
const isDesign = ref(false)

// 排版设计组件实例
const toDesignRef = ref<InstanceType<typeof ToDesign>>()

//确认并返回按钮
const confirmAndBack = () => {
  toDesignRef.value?.finishDesign()
  isDesign.value = false
}
//点击排版设计时 保存id 排版设计时需要使用
const currentAreaId = ref('')
const toDesign = (item: AreaModelProperty$5) => {
  currentAreaId.value = item.id

  isDesign.value = true
}
// 成功页  跳转 按钮
const toClick = () => {
  console.log(stepsRef.value?.active)
  stepsRef.value!.active = 2
  nextTick(() => {
    console.log(stepsRef.value!.active)
    isPreview.value = true
  })
}
//预览页  点击编辑标签
const reToEdit = () => {
  isPreview.value = false
}

//预览页 点击删除标签
const toDelete = () => {
  sendData("Ceiling.CeilingStyle,Delete", { id: id })
  // TODO 弹窗后 回调 用户点击的是哪个按钮

}

const chooseModelThenData = async () => {
  const res = await getData("Ceiling.CeilingStyle,RefreshData")
  currentCeilingStyle.value = res.ceilingStyle
  console.log("接受 选择模型后的数据", res)
}

const init = async () => {
  sendData("Ceiling.CeilingStyle,Editor", { id: id })
  // console.log('临时数据', modelChooseData)
  // currentCeilingStyle.value = modelChooseData as any as ICeilingStyle
  // 绑定接收(生成区域)c++数据
  const data = await getData('Ceiling.CeilingStyle,Model');
  console.log("绑定接收(生成区域)c++数据", data.ceilingStyle)
  currentCeilingStyle.value = data.ceilingStyle


  // 接受 选择模型后的数据
  chooseModelThenData()
}
onMounted(() => {

  init()
})

const useWhitePaint = ref(1)
//乳胶漆 改变 发送数据
const whitePaintChange = (value: any) => {
  sendData("Ceiling.CeilingStyle,,WhitePaint", { isUseWhitePaint: !!value })

}

// 生成吊顶
const generateBtn = () => {
  sendData("Ceiling.CeilingStyle,DataComplete", {})
}
</script>
<style lang="scss" scoped>
.is-preview {
  padding: 38px 16px !important;
}

.edit-page {
  padding: 16px;

  .bottom-btn,
  .top-btn {
    width: 100vw;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    bottom: 0;
    right: 0;
    border-top: 1px solid #E5E7E7;
    padding-right: 12px;
    background-color: #fff;


  }

  .bottom-btn {
    justify-content: space-between;

    .left {
      padding: 0 10px;
      width: 260px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #333;
      font-family: "PingFang SC";
      font-size: 12px;
      font-style: normal;
      font-weight: 500;
    }

    .hidden {
      opacity: 0;
    }
  }

  .top-btn {
    height: 32px;
    top: 0;
    right: 0;
    border: none;
    border-bottom: 1px solid #E5E7E7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;

    .name {
      font-size: 14px;
      font-weight: 500;
      color: #333;
      padding-left: 12px;
    }

    img {
      width: 16px;
      height: 16px;
      margin: 0 5px;
      cursor: pointer;

    }

  }

  .step-2 {
    .render-list {
      color: #C1C5D9;
      font-size: 12px;
      font-weight: 500;
      overflow-x: auto;
      overflow-y: auto;
      margin-bottom: 38px;
      height: calc(100vh - 150px);

      .jicheng-render-item {
        background-color: #F8F9FA;
        border-radius: 8px;
        padding: 20px 8px;
        position: relative;

        .jicheng-btn {
          width: 200px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          position: absolute;
          right: 0px;
          bottom: 8px;

          .is-design,
          .no-design {
            width: 94px;
            height: 22px;
            border-radius: 5px;
            background: rgba(255, 210, 124, 0.24);
            color: #FFB320;
            color: var(--, #FFB320);
            font-family: "PingFang SC";
            font-size: 12px;
            font-weight: 400;
            text-align: center;
            line-height: 22px;
            display: flex;
            align-items: center;

            justify-content: center;

            img {
              width: 14px;
              height: 14px;
              margin-right: 2px;

            }
          }

          .no-design {
            background-color: #E8F1FF;
            color: #326BFF;

          }

          .design {
            color: #326BFF;
            border: 1px solid #326BFF;
            overflow: hidden;
            width: 80px;
            height: 28px;
            text-align: center;
            line-height: 28px;
            font-family: "PingFang SC";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            border-radius: 4px;
            cursor: pointer;


          }
        }
      }

      .render-item {
        display: flex;
        margin: 8px 0;

        .text {
          width: 25px;
          padding-top: 5px;

        }

        .is-vertical {
          writing-mode: vertical-rl;

          height: 40px;
          position: relative;
          right: 10px;
        }

        .number {
          color: #555;
          margin: 5px;
        }

        .text {
          white-space: nowrap;
        }



        .card {
          width: 224px;
          height: 70px;
          flex-shrink: 0;
          border: 1px solid #E5E7E7;
          border-radius: 4px;
          display: flex;
          align-items: center;
          margin-right: 10px;
          justify-content: flex-start;
          cursor: pointer;

          .left {
            width: 54px;
            height: 54px;
            flex-shrink: 0;
            border: 1px solid #E5E7E7;
            border-radius: 4px;
            background-color: #F2F4F7;
            position: relative;
            margin: 0 8px;


            img {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              width: 28px;
              height: 28px;
            }

            .real-img {
              width: 56px;
              height: 56px;
              flex-shrink: 0;
            }

            .tip-img {
              position: absolute;
              top: 50px;
              left: 50px;
              width: 6px;
              height: 6px;
              z-index: 2;
            }

          }

          .right {
            flex: 1;
            color: #333;
            font-family: "PingFang SC";
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            height: 45px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            padding: 0 4px;
            position: relative;

            img {
              position: absolute;
              width: 14px;
              height: 14px;
              right: 8px;
              top: -2px;
            }

            .right-b {
              color: #C1C5D9;
              font-weight: 400;
            }

          }
        }

      }



    }
  }

  .step-1 {
    display: flex;
    flex-direction: column;
    padding: 0 13px;

    :deep(.el-checkbox) {
      width: 138px;
      height: 40px;
      font-family: "PingFang SC";
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
    }

    .fenqu-btn {
      height: 28px;
      width: 85px;
      text-align: center;
      line-height: 28px;
      font-size: 12px;
      color: #555;
      border: 1px solid #E5E7E7;
      padding: 0 16px;
      border-radius: 4px;
      cursor: pointer;
      border: 1px solid #326BFF;
      color: #326BFF;
      margin-top: 24px;
    }

    .check {}

    .choose-type {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 12px;
      font-weight: 400;
      color: #555;
      margin-bottom: 16px;

      :deep(.el-checkbox) {
        color: #333;
        font-family: "PingFang SC";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        /* 157.143% */
      }


      :deep(.el-select__selected-item) {
        font-size: 12px;
      }


    }

    p {
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }

    .choose {
      display: flex;

      .choose-btn {
        height: 28px;
        text-align: center;
        line-height: 28px;
        font-size: 12px;
        color: #555;
        border: 1px solid #E5E7E7;
        background-color: #F1F2F8;
        padding: 0 16px;
        border-radius: 4px;
        cursor: pointer;
      }

      .active {
        border: 1px solid #326BFF;
        color: #326BFF;
      }

    }
  }
}
</style>